<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">

    <style>
        .shopbox {
            position: fixed;
            height: 45px;
            background-color: #FFFFFF;
            line-height: 45px;
            bottom: 0px;
        }

        .select {
            padding: 0 0 0 5px;
        }

        .select span {
            font-size: 11px;
            vertical-align: middle;
            color: #787878;
        }

        .totol {
            font-size: 11px;
            color: #787878;
            margin-left: 5px;
        }

        .totol span {
            font-size: 15px;
            color: #FF0000;
        }

        .goset {
            background-color: #ED6D00;
            font-size: 18px;
            color: #fff;
            text-align: center;
            display: inline-block;
            width: 100%;
        }

        .order-title .am-u-sm-12 {
            padding: 6px 6px;
            border-bottom: 1px solid #F2F2F2;
        }

        .order-title .am-u-sm-12 .ti {
            font-size: 18px;
            color: #000;
            vertical-align: middle;
            display: inline-block;
            line-height: 25px;
            margin-left: 8px;
        }

        .info-box {
            background: url('${pageContext.request.contextPath}/images/boder_sm.png') repeat-x;
            background-size: 100%;
            line-height: 26px;
            position: relative;
        }

        .info-box .nick {
            font-size: 14px;
            color: #DFDFDF;
            margin-right: 20px;
        }

        .info-box .phone {
            font-size: 14px;
            color: #999;
        }

        .info-box .default {
            border: 1px solid #FFAD01;
            color: #FFAD01;
            display: inline-block;
            border-radius: 3px;
            padding: 2px;
            margin-right: 20px;
            line-height: 1em;
            font-size: 12px;
        }

        .info-box .edit {
            position: absolute;
            top: 40%;
            right: 10px;
        }

        /*.goods-box {*/
        /*margin-bottom: 10px;*/
        /*}*/

        .goods-box .goods-head {
            border-bottom: 1px solid #F3F3F3;
            padding: 15px 20px 10px;
            font-size: 13px;
        }

        .goods-box .good-content {
            padding: 10px 5px 0px 0;
            border-bottom: 1px solid #D8D8D8;
        }

        .goods-box .good-content .title {
            position: absolute;
            top: 3px;
            color: #2C2D2F;
            left: 104px;
            font-size: 16px;
            height: 55px;
            line-height: 18px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            letter-spacing: 0;
            vertical-align: middle;
        }

        .goods-box .good-content .map {
            color: #787878;
            font-size: 9px;
            position: absolute;
            top: 58px;
            left: 110px;
        }

        .goods-box .good-price {
            margin-bottom: 10px;
        }

        .goods-box .good-price .money {
            text-overflow: ellipsis;
            display: block;
            line-height: 30px;
        }

        .goods-box .good-price .num {
            margin-left: 3px;
            color: #898989;
        }

        .goods-box .good-totol {
            margin-bottom: 15px;
        }

        .goods-box .good-totol span {
            display: block;
            font-size: 13px;
        }
    </style>

</head>

<body class="bg-default">
<form id="pay" action="${pageContext.request.contextPath}/userGoodsOrder/confirm" method="post">
    <div class="am-g bg-white order-title">
        <div class="am-u-sm-12">
            <a href="javascript:history.back(-1);"><i class="am-icon-chevron-left"
                                                      style="color: #ccc;margin-top: 5px;"></i></a>
        </div>
        <a href="${pageContext.request.contextPath}/clientHome/goSelectAddress">
            <div class="am-u-sm-12 info-box" style="padding: 10px 30px 10px 15px;">
                <c:if test="${address!=null}">
                    <input id="addressId" name="addressId" value="${address.id}" type="hidden"/>
                    <span class="nick" style="">${address.contractName}</span> <span
                        class="phone">${address.contractPhone}</span><br>
                    <span class="phone">${address.address}</span>
                </c:if>
                <c:if test="${address==null}">
                    <input id="addressId" name="addressId" value="-1" type="hidden"/>
                    <span class="nick" style="">请选择地址</span>
                </c:if>
                <img src="${pageContext.request.contextPath}/images/right.png" width="20"
                     alt="" class="edit">
            </div>
        </a>
    </div>

    <div class="am-g">
        <div class="am-u-sm-12">
            <span style="font-size: 14px;color: #888;line-height: 30px;">确定订单信息</span>
        </div>
    </div>
    <div class="am-g goods-box bg-white">
        <div class="am-u-sm-12 good-content">

            <c:forEach items="${list}" var="item">
                <div class="am-u-sm-10 ">
                    <img src="${item.image}" alt="" width="85" height="75">
                    <span class="title">${item.goodsName}</span>
                    <span class="map">${item.propertyName}</span>
                </div>
                <div class="am-u-sm-2 am-padding-0 good-price">
                    <span class="money"><nobr>￥${item.propertyValue}</nobr></span>
                    <span class="num">x${item.quantity}</span>
                    <span class="money"><nobr>￥${item.propertyValue*item.quantity}</nobr></span>
                </div>
            </c:forEach>

        </div>
    </div>

    <style>
        textarea {
            width: 98%;
            border: none;
            outline: none;
            resize: none;
            line-height: 20px;
        }
    </style>
    <div class="am-g bg-white" style="margin-bottom: 100px;">
        <div class="am-u-sm-12" style="font-size: 14px;color: #999;line-height: 40px;border-bottom: 1px solid #D8D8D8;">
            <span>配送方式</span><span class="" style="float: right">快递：免邮</span>
        </div>
        <div class="am-u-sm-3 am-padding-right-0">
            <span style="font-size: 14px;color: #999;line-height: 30px;">买家留言</span>
        </div>
        <div class="am-u-sm-9 am-padding-0 am-text-center">
            <textarea id="note" name="note" class="" rows="5" placeholder="对本次交易的说明"></textarea>
        </div>
    </div>

    <div class="am-g shopbox">


        <div class="am-u-sm-5 am-text-left am-padding-left-2">
            <span class="totol">
            合计:<span>￥
                    <span style="overflow: hidden;">${gorder.totalPrice}</span>
                </span>
            </span>
        </div>
        <div class="am-u-sm-4 am-padding-0">
            <a href="#" onclick="sub()" class="goset">去付款</a>
        </div>
    </div>

</form>
</body>
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">

    //    var goorder = new Vue({
    //        el: "#goorder",
    //        data: {
    //            gorder:
    //        }
    //    });

    function sub() {

        var addressId = $("#addressId").val();
        if (addressId == -1) {
            layer.msg("请选择一个收货地址！")
            return;
        }

        $("#pay").submit();

    }

    $(function () {
        var w = document.body.clientWidth / 12 * 10 - 115;
        $('.title').css('width', w);
        $('.title').css('left', 110);
    });
</script>
</html>